<template>
  <div class="CBP">
    <div v-if="type === '打印'" class="mask"></div>
    <div class="title">{{ hospitalName }}</div>
    <div class="title">{{ title }}</div>
    <div class="form">
      <div class="formRow">
        <div class="formItem">
          <div class="formLabel">日期：</div>
          <div class="formContent">
            <el-input v-model="pageData.date" class="w-80"></el-input>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">床号：</div>
          <div class="formContent">
            <el-input
              v-model="pageData.bedNumber"
              class="w-80"
              disabled
            ></el-input>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">姓名：</div>
          <div class="formContent">
            <el-input
              v-model="pageData.patientName"
              class="w-80"
              disabled
            ></el-input>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">住院号：</div>
          <div class="formContent">
            <el-input
              v-model="pageData.hospitalNumber"
              class="w-80"
              disabled
            ></el-input>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">性别：</div>
          <div class="formContent">
            <el-input
              v-model="pageData.gender"
              class="w-50"
              disabled
            ></el-input>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">年龄：</div>
          <div class="formContent">
            <el-input v-model="pageData.age" class="w-50" disabled></el-input>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">病区：</div>
          <div class="formContent">
            <el-input
              :value="patCur.wardName"
              class="w-100"
              disabled
            ></el-input>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">科室：</div>
          <div class="formContent">
            <el-input
              :value="patCur.deptName"
              class="w-100"
              disabled
            ></el-input>
          </div>
        </div>
      </div>

      <div class="formRow">
        <div class="formItem" style="width: 100%">
          <div class="formLabel">诊断：</div>
          <div class="formContent" style="width: 100%">
            <el-input v-model="pageData.zd" disabled></el-input>
          </div>
        </div>
      </div>
      <div class="formRow">
        <div class="formItem">
          <div class="formLabel">机型：</div>
          <div class="formContent">
            <el-input v-model="pageData.machineModel" class="w-50"></el-input>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">滤器：</div>
          <div class="formContent">
            <el-input v-model="pageData.strainer" class="w-50"></el-input>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">治疗模式：</div>
          <div class="formContent">
            <el-input v-model="pageData.treatmentModel" class="w-50"></el-input>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">抗凝方式：</div>
          <div class="formContent">
            <el-radio-group v-model="pageData.anticoagulationWay">
              <el-radio label="全身">全身</el-radio>
              <el-radio label="局部">局部</el-radio>
              <el-radio label="无抗凝剂">无抗凝剂</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">抗凝剂：</div>
          <div class="formContent">
            <el-radio-group v-model="pageData.anticoagulant">
              <el-radio label="低分子肝素">低分子肝素</el-radio>
              <el-radio label="枸橼酸钠">枸橼酸钠</el-radio>
              <el-radio label="普通肝素">普通肝素</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">首剂：</div>
          <div class="formContent">
            <el-input
              v-model="pageData.anticoagulantFirst"
              class="w-50"
            ></el-input>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">维持：</div>
          <div class="formContent">
            <el-input
              v-model="pageData.anticoagulantDose"
              class="w-50"
            ></el-input>
          </div>
        </div>
      </div>
      <div class="formRow">
        <div class="formItem">
          <div class="formLabel">目标净超滤量：</div>
          <div class="formContent">
            <el-input
              v-model="pageData.ultrafiltration"
              class="w-80"
            ></el-input>
            <div class="unit">ml</div>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">置换液方式：</div>
          <div class="formContent">
            <el-radio-group v-model="pageData.diluteType">
              <el-radio label="前稀释">
                前稀释
                <el-input
                  v-model="pageData.diluteBefore"
                  class="w-80"
                ></el-input>
                ml/h
              </el-radio>
              <el-radio label="后稀释">
                后稀释
                <el-input
                  v-model="pageData.diluteAfter"
                  class="w-80"
                ></el-input>
                <div class="unit">ml/h</div>
              </el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">预治疗时间：</div>
          <div class="formContent">
            <el-input
              v-model="pageData.treatmentTimeExpect"
              class="w-80"
            ></el-input>
            <div class="unit">h</div>
          </div>
        </div>
        <div class="formItem">
          <div class="formLabel">实际治疗时间：</div>
          <div class="formContent">
            <el-input
              v-model="pageData.treatmentTimeReality"
              class="w-80"
            ></el-input>
            <div class="unit">h</div>
          </div>
        </div>
      </div>
    </div>

    <div class="box">
      <div class="myContainer" style="width: 55%">
        <div class="tableHeader" style="height: 50px">
          <TableHeaderRow :columns="columns1" />
        </div>
        <div class="tableBody">
          <div v-for="(_, idx) in 20" :key="idx" class="myRow">
            <div
              v-for="(item, index) in columns1Leaf"
              :key="index"
              class="myCol"
              :style="{
                width: item.width,
                flexShrink: item.width ? '0' : '1'
              }"
            >
              <el-input
                v-model="pageData.tableData1[idx][item.prop]"
              ></el-input>
            </div>
          </div>
          <div class="myRow">
            <div class="myCol" style="flex-wrap: nowrap; white-space: nowrap">
              病情记录：
              <el-input v-model="pageData.pathography"></el-input>
            </div>
          </div>
          <div class="myRow"><div class="myCol"></div></div>
          <div class="myRow"><div class="myCol"></div></div>
          <div class="myRow"><div class="myCol"></div></div>
        </div>
      </div>
      <div class="myContainer" style="width: 45%">
        <div class="tableHeader" style="height: 73px">
          <TableHeaderRow :columns="columns2" />
        </div>
        <div class="tableBody">
          <div v-for="(_, idx) in 19" :key="idx" class="myRow">
            <div
              v-for="(item, index) in columns2Leaf"
              :key="index"
              class="myCol"
              :style="{
                width: item.width,
                flexShrink: item.width ? '0' : '1'
              }"
            >
              <el-input
                v-model="pageData.tableData2[idx][item.prop]"
              ></el-input>
            </div>
          </div>
          <div class="myRow">
            <div class="myCol" style="justify-content: flex-end">
              专人管理：
              <el-input
                v-model="pageData.management"
                style="width: 100px"
              ></el-input>

              负责人签名：
              <img
                v-if="signPhoto(pageData.sign, 'nursingDocument', docType)"
                :src="
                  'data:image/png;base64,' +
                  signPhoto(pageData.sign, 'nursingDocument', docType)
                "
                alt=""
                style="display: block; max-width: 98%; height: 24px"
                @click="handleSignImgClear"
              />
              <el-input
                v-else
                v-model="pageData.sign"
                style="width: 100px"
                @blur="handleSignInputBlur"
              ></el-input>
            </div>
          </div>
          <div class="myRow"><div class="myCol"></div></div>
          <div class="myRow"><div class="myCol"></div></div>
          <div class="myRow"><div class="myCol"></div></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { format } from 'date-fns'
import { cloneDeep } from 'lodash-unified'
import {
  computed,
  defineComponent,
  nextTick,
  reactive,
  set,
  toRefs,
  watch
} from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import { usePatCur, useSign } from '@/hooks'
import {
  getElementFnFromInstance,
  getStoreFromInstance
} from '@/utils/instance'

import { autoImportKeys, baseData, columns1, columns2 } from './baseData.js'
import TableHeaderRow from './tableHeaderRow.vue'

export default defineComponent({
  components: {
    DateSelection,
    TableHeaderRow
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    formType: {
      type: String,
      default: 'add'
    },
    type: {
      type: String,
      default: ''
    },
    docType: {
      type: [String, Number],
      default: ''
    },
    idx: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      columns1,
      columns1Leaf: getColumnsLeaf(columns1),
      columns2,
      columns2Leaf: getColumnsLeaf(columns2),
      pageData: cloneDeep(baseData),
      hospitalName: window.hospitalName
    })

    const store = getStoreFromInstance()
    const { zdIndex } = usePatCur()
    const { signPhoto, queryUserSignByName } = useSign()

    const patCur = computed(() => store.getters.patCur)

    function getColumnsLeaf(list) {
      const arr = []
      list.forEach(v => {
        if (v.children && v.children.length > 0) {
          arr.push(...getColumnsLeaf(v.children))
        } else {
          arr.push(cloneDeep(v))
        }
      })
      return arr
    }

    function initData() {
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        state.pageData = jsonText
      } else {
        const pageData = {
          ...cloneDeep(baseData),
          bedNumber: patCur.value.bedNumber,
          patientName: patCur.value.patientName,
          gender: patCur.value.gender == 1 ? '男' : '女',
          hospitalNumber: patCur.value.hospitalNumber,
          age: patCur.value.age,
          zd: zdIndex.value
        }
        // if (props.data.latestJsonText) {
        //   const latestJsonText = JSON.parse(props.data.latestJsonText)
        //   autoImportKeys.forEach(v => {
        //     latestJsonText[v] && (pageData[v] = latestJsonText[v])
        //   })
        // }
        state.pageData = pageData
      }
    }

    function getParams() {
      return state.pageData
    }

    function handleSignInputBlur() {
      queryUserSignByName(
        [state.pageData.sign],
        'nursingDocument',
        props.docType
      )
    }

    function handleSignImgClear() {
      state.pageData.sign = ''
    }

    watch(
      () => props.data,
      () => {
        initData()
      },
      { immediate: true }
    )

    return {
      ...toRefs(state),
      patCur,
      signPhoto,
      getParams,
      format,
      handleSignInputBlur,
      handleSignImgClear
    }
  }
})
</script>

<style lang="scss" scoped>
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}

.title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}

.form {
  .formRow {
    display: flex;
    margin-top: 4px;

    .formItem {
      display: flex;
      margin-right: 20px;

      .formLabel {
        line-height: 24px;
        flex-shrink: 0;
        text-align: right;
      }

      .formContent {
        display: flex;
        flex-wrap: wrap;
      }

      .unit {
        line-height: 24px;
        flex-shrink: 0;
        padding-left: 8px;
      }
    }
  }
}

.box {
  display: flex;
}

.myContainer {
  border: 1px solid #000;
  border-top: none;
  border-left: none;
  margin-top: 16px;

  .myRow {
    display: flex;
    position: relative;
    border-top: 1px solid #000;

    .myCol {
      min-height: 22px;
      width: 100%;
      padding: 0 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      border-left: 1px solid #000;
    }
  }

  .baseInfo {
    .myCol {
      padding: 0;
      align-items: flex-start;
    }

    .text {
      min-width: 50px;
      text-align: center;
    }

    .empty {
      width: 70px;
    }
  }

  .tableHeader {
    border-left: 1px solid #000;
    overflow: hidden;
  }
}

.w-50 {
  width: 50px;
}

.w-60 {
  width: 60px;
}

.w-80 {
  width: 80px;
}

.w-100 {
  width: 100px;
}

.w-150 {
  width: 150px;
}

.w-200 {
  width: 200px;
}

.w-300 {
  width: 300px;
}

.w-500 {
  width: 500px;
}

:deep {
  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
    color: #000;
  }

  .el-input__inner {
    height: 24px;
    line-height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    font-size: 12px;
    color: #000;
  }

  .form .el-input__inner {
    border-bottom: 1px solid #000;
  }

  .myContainer .el-input__inner {
    height: 22px;
    line-height: 22px;
  }

  .el-radio {
    display: flex;
    align-items: center;
    margin-right: 8px;

    &:last-child {
      margin-right: 0;
    }
  }

  .el-radio-group {
    display: flex;
    align-items: center;
  }

  .el-radio__label {
    padding-left: 4px;
    line-height: 1;
    font-size: 13px;
    color: #000;
    transform: translateY(-1px);
    font-weight: normal;
    display: flex;
    align-items: center;
  }

  .el-radio__inner {
    width: 13px;
    height: 13px;
    border-radius: 0;
    border-color: #000;
    background-color: transparent;
    transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);

    &::after {
      top: 0;
      left: 4px;
      width: 3px;
      height: 7px;
      transform: rotate(45deg) scaleY(0);
      border-radius: inherit;
      border: 1px solid #000;
      border-left: 0;
      border-top: 0;
      background-color: transparent;
      color: #000;
      box-sizing: content-box;
    }
  }

  .el-radio__input {
    margin-left: 5px;

    &.is-checked {
      .el-radio__inner {
        background: transparent;
        border-color: #000;

        &::after {
          transform: rotate(45deg) scaleY(1);
        }
      }

      & + .el-radio__label {
        color: #000;
      }
    }

    &.is-disabled {
      .el-radio__inner {
        background-color: transparent;
        border-color: #000;

        &::after {
          background-color: transparent;
        }
      }

      & + span.el-radio__label {
        color: #000;
        cursor: not-allowed;
      }
    }
  }

  .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
    background-color: transparent;
  }

  .el-radio {
    &__inner {
      &::after {
        transform: unset !important;
        border: unset !important;
      }
    }

    &.is-checked {
      .el-radio__inner {
        &::after {
          content: '✓';
          color: #000;
          left: 1px;
          font-size: 11px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
